<template>
    <div>
        <el-divider></el-divider>
        <div style="text-align: left">
            <div style="display: flex;justify-content: space-between;height: 200px">
                <div style="width: 70%;margin-right: 50px">
                    <div style="display: flex;justify-content: space-between">
                        <h4>黄山景区</h4>
                        <el-button type="text" @click="dialogVisible=true;">立即购票</el-button>
                    </div>
                    <p>黄山，中华十大名山之一，天下第一奇山。位于安徽省南部黄山市境内，有72峰，主峰莲花峰海拔1864米，与光明顶、天都峰并称三大黄山主峰，为36大峰之一。黄山是安徽旅游的标志，是中国十大风景名胜唯一的山岳风光。现为世界文化与自然双重遗产，世界地质公园，国家AAAAA级旅游景区，国家级风景名胜区，全国文明风景旅游区示范点，
                        黄山原名“黟山”，因峰岩青黑，遥望苍黛而名。后因传说轩辕黄帝曾在此炼丹，故改名为“黄山”。
                    </p>
                    <el-button-group style="float: right">
                        <el-button size="small" style="width: 150px;color: #a0d911;border-color: #a0d911;background-color: #fcffe6"><i class="el-icon-document"></i>查看详情</el-button>
                        <el-button size="small" style="width: 150px;color: #ff928e;border-color: #ff928e;background-color: #fcffe6">
                            <i class="el-icon-plus"></i>收藏景区</el-button>
                    </el-button-group>
                </div>
                <div style="width: 30%;height: 100%; display:flex; align-items: center">
                    <img src="../../assets/yunhai.jpg" class="image" style="width: 100%;height: 180px;">
                </div>
            </div>
            <el-divider></el-divider>
        </div>
<!--        <div style="text-align: left">-->
<!--            <div style="display: flex;justify-content: space-between;height: 200px">-->
<!--                <div style="width: 70%;margin-right: 50px">-->
<!--                    <div style="display: flex;justify-content: space-between">-->
<!--                        <h4>嵩山景区</h4>-->
<!--                        <el-button type="text">立即购票</el-button>-->
<!--                    </div>-->
<!--                    <p>-->
<!--                        嵩山，古称“外方”，夏商时称“崇高”、“崇山”，西周时成称为 “岳山”，以嵩山为中央左岱（泰山）右华（华山），定嵩山为中岳，始称“中岳嵩山”。嵩山位于河南省西部，地处登封市西北部，西邻古都洛阳，东临古都郑州，属伏牛山系。 嵩山总面积约为450平方公里，由太室山与少室山组成，共72峰，海拔最低为350米，最高处为1512米。-->
<!--                    </p>-->
<!--                    <el-button-group style="float: right">-->
<!--                        <el-button size="small" style="width: 150px;color: #a0d911;border-color: #a0d911;background-color: #fcffe6"><i class="el-icon-document"></i>查看详情</el-button>-->
<!--                        <el-button size="small" style="width: 150px;color: #ff928e;border-color: #ff928e;background-color: #fcffe6"><i class="el-icon-plus"></i>收藏景区</el-button>-->
<!--                    </el-button-group>-->
<!--                </div>-->
<!--                <div style="width: 30%;height: 100%; display:flex; align-items: center">-->
<!--                    <img src="../../assets/yunhai.jpg" class="image" style="width: 100%;height: 180px;">-->
<!--                </div>-->
<!--            </div>-->
<!--            <el-divider></el-divider>-->
<!--        </div>-->
        <el-pagination></el-pagination>
        <el-dialog
                title="提示"
                :visible.sync="dialogVisible"
                width="30%">
            <div>你确定要购买吗</div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="getTicket">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
    import cookies from 'js-cookie'
    import axios from 'axios'
    export default {
        name: "SpotList",
        props:{
            scineList:[]
        },
        data(){
            return{
                dialogVisible:false,
                registerMessage:{

                },
                username:cookies.get('username'),
                batchid:'SP001-2021-06-16'
            }
        },
        methods:{
            async getTicket(){
                axios.post('http://localhost:5000/getticket',
                    {
                        username:this.username,
                        batchid:this.batchid,}).then(res=>{
                    if(res.data.code){
                        alert(res.data.message)
                    }
                    this.dialogVisible=false
                    this.$message.info('购买成功')
                })
            }

        }
    }
</script>

<style scoped>

</style>
